<template>
  <view class="Mall4j container">
    <view class="page">
      <view class="group_1 flex-col">
        <view class="block_1 flex-row">
          <view class="image-text_1 flex-row justify-between" @tap="toSearchPage">
            <image class="thumbnail_1" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG604a7eb1aa21429bdd06e3529c862a7b.png" />
            <text class="text-group_1">搜索您喜欢的物品</text>
          </view>
        </view>
      </view>
      <view class="group_2 ">
        <view class="scroll_view_1">
          <scroll-view scroll-x="true" class="category-tit" :scroll-into-view="intoView" :scroll-with-animation="true">
            <block v-for="(item, index) in subCategoryList" :key="index">
              <view :id="'sw' + item.categoryId" :class="'category-item ' + (item.categoryId==categoryId ? 'on':'')" :data-id="item.categoryId" @tap="onSubCategoryTap">{{ item.categoryName }}</view>
            </block>
          </scroll-view>

        </view>

        <view class="prod-item">
          <view class="hotsale-item-cont">
            <jp-falls class="falls" :routesList="prodList">
              <template #left={left}>
                <view v-for="(item, index) in left" :key="item.prodId">
                  <prod :item="item" />
                </view>
              </template>
              <template #right={right}>
                <view v-for="(item, index) in right" :key="item.prodId">
                  <prod :item="item" />
                </view>
              </template>
            </jp-falls>
          </view>
        </view>
        <empty v-if="prodList.length==0" />

      </view>
    </view>

  </view>

</template>
<script>
var http = require('@/utils/http.js')
import prod from '@/components/production/index.vue'
import empty from '@/components/empty-tips/index.vue'
export default {
  data () {
    return {
      constants: {},
      intoView: '',
      // ?parentId=94&categoryId=131
      parentId: '94',
      categoryId: '131',
      subCategoryList: [],
      prodList: [],
      current: 1,
      pages: 0,
    };
  },
  components: {
    prod,
    empty
  },
  onLoad: function (options) {
    this.getSubCategory()
    this.getProdList()
  },
  onReachBottom: function () {
    if (this.current < this.pages) {
      this.current = this.current + 1
      this.getProdList()
    }
  },
  methods: {

    // 跳转搜索页
    toSearchPage: function () {
      uni.navigateTo({
        url: '/pages/search-page/search-page'
      });
    },
    getSubCategory () {
      var params = {
        url: '/category/categoryInfo',
        method: 'GET',
        data: {
          parentId: this.parentId
        },
        callBack: res => {
          this.setData({
            subCategoryList: res
          })
          this.$nextTick(() => {
            this.intoView = 'sw' + this.categoryId
          })
        }
      }
      http.request(params)
    },
    /**
       * 根据分类id获取商品列表数据
       */
    getProdList () {
      var params = {
        url: '/search/searchProdPage',
        method: 'GET',
        data: {
          categoryId: this.categoryId,
          current: this.current,
          size: 10,
          sort: 0,
          isAllProdType: true
        },
        callBack: res => {
          this.setData({
            prodList: res.current == 1 ? res.records.map((e) => {
              return {
                ...e,
                price_1: this.$parsePrice(e.price)[0],
                price_2: this.$parsePrice(e.price)[1],
              }
            }) : this.prodList.concat(res.records.map((e) => {
              return {
                ...e,
                price_1: this.$parsePrice(e.price)[0],
                price_2: this.$parsePrice(e.price)[1],
              }
            })),
            current: res.current,
            pages: res.pages
          })
        }
      }
      http.request(params)
    },
    /**
       * 切换顶部分类
       */
    onSubCategoryTap (e) {
      this.setData({
        categoryId: e.currentTarget.dataset.id,
        current: 1,
        pages: 0,
        intoView: 'sw' + e.currentTarget.dataset.id
      })
      this.prodList = []

      this.getProdList()
    }
  }
};
</script>
<style scoped lang='scss'>
page {
  background: #f2f2f2;
}
.container {
  height: 100%;
  background: #f2f2f2;
}
.page {
  width: 100%;
  background: url(https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/points-redemption/MasterDDSSlicePNG3e3f31ad217a1d04edfd2d26df95a6b3.png)
    no-repeat;
  background-size: 100%;
  background-position: 0 -119rpx;
  .group_1 {
    height: 484rpx;
    .block_1 {
      background-color: rgb(255, 255, 255);
      border-radius: 17px;
      height: 61.0465116279rpx;
      margin: 34rpx 34rpx 0 34.8837209302rpx;
      .image-text_1 {
        width: 500rpx;
        height: 34.883720930232556rpx;
        margin: 12.209302325581396rpx 0 0 17.441860465116278rpx;
        .thumbnail_1 {
          width: 27.906976744186046rpx;
          height: 27.906976744186046rpx;
          margin-top: 5.232558139534884rpx;
        }
        .text-group_1 {
          width: 100%;
          margin-left: 15rpx;
          height: 34.883720930232556rpx;
          overflow-wrap: break-word;
          color: rgba(179, 179, 179, 1);
          font-size: 24.41860465116279rpx;
          font-family: Source Han Sans-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34.883720930232556rpx;
        }
      }
    }
  }
  .group_2 {
    background: #f2f2f2;
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
    padding: 13rpx 20rpx;
    .scroll_view_1 {
      height: 83rpx;
      overflow: hidden;
      .category-tit {
        width: 100%;
        white-space: nowrap;
        font-size: 30rpx;
        height: 90rpx;
        overflow: hidden;
        .category-item {
          display: inline-block;
          padding: 20rpx 10rpx;
          margin: 0 20rpx;
          box-sizing: border-box;
          font-size: 28rpx;
        }
      }
    }

    .prod-item {
      margin-top: 20rpx;
    }

    .on {
      border-bottom: 4rpx solid #ff6d13;
      color: #ff6d13;
    }
  }
}
</style>
